<!--
 * @Author: wangming
 * @Date: 2021-04-19 16:04:05
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-28 16:35:51
 * @Description: 表单布局控件
-->
<template>
  <div class="rowbox laybox rel sz pt20">
    <div class="rowdelete abs ks-row-middle lh1">
      <div class="title wh f12 ks-row-middle mover poi">
        <span class="mr5">{{ config.name }}</span>
        <i class="el-icon-rank f16"></i>
      </div>
      <Operatenav
        :parentIndex="parentIndex"
        :index="configIndex"
        :configList="configList"
        :parentList="parentList"
      />
      <div class="title poi" @click.stop="$emit('deltag')" v-show="deleteShow">
        <i class="el-icon-delete f14 wh"></i>
      </div>
    </div>
    <!-- 动态布局容器 -->
    <component
      :parentIndex="configIndex"
      :configList="configList"
      :class="{ hide: config.__config.hide }"
      :is="config.redirectName || config.tagName"
      :config="config"
      class="ovh"
    >
      <template v-slot="{ list }">
        <!-- 容器内部动态组件 -->
        <component
          :parentIndex="configIndex"
          :configIndex="index"
          :parentList="configList"
          :configList="list"
          :is="i.__config.type === 'rowLayout' ? 'rowLayout' : 'formItemDesgic'"
          isEdit
          v-for="(i, index) in list"
          :itemChecked="i.key === getModelForm.key"
          :class="{
            active: i.key === getModelForm.key,
          }"
          @deltag="deltag(index, list)"
          @click.native.stop="
            handleAdd({ newIndex: index, type: 'click' }, list)
          "
          :key="i.key"
          :config="i"
          :form="form"
        ></component>
      </template>
    </component>
  </div>
</template>

<script>
import Operatenav from "../__components__/Operatenav.vue";
import layouts from "./index.js";
import mixins from "./mixins.js";
import formItemDesgic from "../formItem_desgic/index.vue";
export default {
  inject: ["parentLayout"],
  props: {
    configIndex: {
      type: Number,
      default: 0,
    },
    parentIndex: {
      type: Number,
      default: 0,
    },
    deleteShow: {
      default: true,
      type: Boolean,
    },
    configList: {
      type: Array,
      default: () => [],
    },
    parentList: {
      default: () => null,
    },
  },
  name: "rowLayout",
  components: { ...layouts, formItemDesgic, Operatenav },
  mixins: [mixins],
  methods: {
    operateNext() {},
  },
  mounted() {
    //对布局所在位置的状态做标识
    this.$set(this.config, "isFormLayout", this.parentLayout !== "hlLayout");
  },
};
</script>

<style lang="scss" scoped>
.rowbox {
  width: 100%;
  display: flex;
}
.rowdelete {
  right: 0;
  top: -4px;
  opacity: 0.3;
  .title {
    background-color: #1890ff;
    padding: 4px 8px;
  }
}
.hide {
  background-image: url("~@/assets/image/hide.png");
}
</style>
